<template>
  <div class="UpdateOrg-container">
    <a-modal v-model="modalVisible" destroyOnClose :width="1200" title="组织信息" @cancel="modalVisible = false">
      <a-spin :spinning="loadingPage">
        <a-tabs :activeKey="activeKey" @tabClick="handleTabClick">
          <a-tab-pane v-for="item in tabsList" :key="item.key" :tab="item.label" :disabled="disabledJob && item.key === 'Job'">
            <div class="content-wrapper" v-if="item.key === 'Basic'">
              <title-name title="组织基本信息"></title-name>
              <OrgBasicInfo
                ref="OrgBasicInfoRef"
                :type="pageType"
                :parentId="transmit.parentId"
                :parent="transmit.parent"
                :recordId.sync="transmit.id"
                :disabledTag.sync="disabledTag"
                @typeChange="handleOrgTypeChanged"
                @orgTypeChanged="handleOrgTypeChanged"
              />
            </div>
            <div class="content-wrapper" v-if="item.key === 'Job'">
              <title-name title="岗位信息"></title-name>
              <PostManage ref="postManage" :orgId="transmit.id" :disabled="disabledAll" />
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-spin>
      <div style="text-align: right;">
        <a-button type="primary" :loading="loading.isNext" @click="handleNext" v-show="activeKey !== tabsList[tabsList.length - 1].key" :disabled="disabledJob">下一步</a-button>
      </div>
      <template #footer>
        <div class="tool-btns">
          <a-button v-show="pageType !== 'look'" :loading="loading.isSubmit" type="primary" @click="handleSubmit">提交</a-button>
          <a-button class="ml12" type="primary" @click="closeMoadal">关闭</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script>
import OrgBasicInfo from './OrgBasicInfoModal'
import PostManage from './postManageModal'
import { checkBaseOrgIsRelation } from '@/api/system/system'

const tabsList = [
  {
    label: '基本信息',
    key: 'Basic'
  },
  {
    label: '岗位信息',
    key: 'Job'
  }
]
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    },
    transmit: {
      type: Object,
      default: {}
    }
  },
  components: {
    OrgBasicInfo,
    PostManage
  },
  data() {
    return {
      // visible: false, //展开模态框
      disabledJob: true,
      disabledTag: false,
      activeKey: tabsList[0].key,
      tabsList,
      loadingPage: false,
      loading: {
        isNext: false,
        isSubmit: false
      }
    }
  },
  computed: {
    modalVisible: {
      get: function () {
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    },
    pageType() {
      return this.transmit.pageType || 'add'
    },
    disabledAll() {
      return this.pageType === 'look'
    }
  },
  watch: {
    visible: {
      handler(val) {
        this.disabledTag = false;
        if (this.pageType !== 'add') {
          this.loadingPage = true
        }
        setTimeout(() => {
          this.loadingPage = false
        }, 5000)
        setTimeout(() => {
          this.isCheckBaseOrgIsRelation(this.transmit.id);
          this.$refs.OrgBasicInfoRef[0].getEditPostReq(this.transmit.parentId, true)
          this.$refs.OrgBasicInfoRef[0].getEditPostReq(this.transmit.id, false)
          this.$refs.OrgBasicInfoRef[0].getOrgTree()
        }, 300)
        if (!val) {
          this.$refs.OrgBasicInfoRef[0].clearFrom()
          this.$emit('closeModal')
        }
      }
      // immediate: true
    }
  },
  methods: {
    //关闭模态框
    closeMoadal() {
      this.$emit('closeModal')
    },
    //清空表单数据
    handleOrgTypeChanged(val) {
      // 只有组织类型为部门('2',7)时，才有岗位信息
      if (val !== '2' && val !== '7') {
        this.disabledJob = true
      } else {
        this.disabledJob = false
      }
    },
    //基础组织架构是否关联公司
    async isCheckBaseOrgIsRelation(id) {
      if (!id) {
        return
      }
      let res = await checkBaseOrgIsRelation(id)
      this.disabledTag = res.data;
    },
    //提交
    handleSubmit() {
      if (this.activeKey === 'Job') {
        this.$message.success('提交成功')
        this.modalVisible = false
        return
      }
      if (this.loading.isSubmit) return
      this.loading.isSubmit = true
      setTimeout(() => {
        this.loading.isSubmit = false
      }, 3000)
      const submitPromise = new Promise((resolve, reject) => {
        this.basicInfoValidator(resolve, reject)
      })
      submitPromise
        .then(() => {
          this.loading.isSubmit = false
          // if (this.disabledJob){
          this.$emit('closeModal','submit')
          // }
        })
        .catch(() => {
          this.loading.isSubmit = false
        })
    },
    //下一步
    handleNext() {
      if (this.loading.isNext) return
      this.loading.isNext = true
      setTimeout(() => {
        this.loading.isNext = false
      }, 3000)
      this.validBeforeNext(this.activeKey)
        .then(() => {
          this.loading.isNext = false
          const index = this.tabsList.findIndex((item) => item.key === this.activeKey)
          if (this.tabsList[index + 1]) {
            this.activeKey = this.tabsList[index + 1].key
          } else {
            this.activeKey = this.tabsList[0].key
          }
        })
        .catch(() => {
          this.loading.isNext = false
        })
    },
    basicInfoValidator(...args) {
      this.$refs.OrgBasicInfoRef[0].handleSubmit(...args)
    },
    /**
     * 点击下一步，跳转之前进行的校验，返回一个Promise
     */
    validBeforeNext(key) {
      return new Promise((resolve, reject) => {
        // 查看页面直接校验通过
        if (this.pageType === 'look') {
          resolve()
          return
        }
        // 在这里对需要校验的tab页，添加处理函数
        const validMap = {
          Basic: this.basicInfoValidator
        }
        if (validMap[key]) {
          validMap[key](resolve, reject)
        } else {
          resolve()
        }
      })
    },
    handleTabClick(key) {
      if (this.loading.isNext) return
      this.loading.isNext = true
      this.validBeforeNext(this.activeKey)
        .then(() => {
          this.activeKey = key
          this.loading.isNext = false
        })
        .catch(() => {
          this.loading.isNext = false
        })
    }
  }
}
</script>
